<template>
  <el-card class="search">
    <div class="user">关键词搜索</div>
    <el-row :gutter="10">
      <el-col :xs="24" :md="12">
        <div class="userNum">搜索用户数</div>
        <div class="userNum2">113,198</div>
        <SearchUser />
      </el-col>
      <el-col :xs="24" :md="12">
        <div class="userNum">搜索量</div>
        <div class="userNum2">232,454</div>
        <SearchNum />
      </el-col>
    </el-row>

    <SearchTable />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SearchKeyword",
};
</script>

<script lang="ts" setup>
import SearchUser from "./SearchUser.vue";
import SearchNum from "./SearchNum.vue";
import SearchTable from "./SearchTable.vue";
</script>

<style scoped>
.search {
  margin-top: 20px;
}
.user {
  padding: 0px 20px;
  border-bottom: 1px solid gray;
  height: 40px;
}
.userNum {
  font-size: 14px;
  color: #999;
}
.userNum2 {
  font-size: 22px;
  color: #333;
  font-weight: 500;
  letter-spacing: 2px;
}
</style>
